<!--
 * @Author: your name
 * @Date: 2022-05-05 09:39:00
 * @LastEditTime: 2022-05-13 17:28:17
 * @LastEditors: gong.jiuhui you@example.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jk_one-stop_cloud_mobile_v1.0\src\views\dashboard\SearchTag.vue
-->
<template>
  <div class="search-content wrap-apply" :class="GLOBAL.currentEnvironment ? 'topStyle' : ''">
   
    <van-cell-group>
      <p class="label  FormTit"><span></span>申请提交时间</p>
      <dateTime
        title="申请提交"
        type="date"
        :startTime="params.applyTimeBegin"
        :endTime="params.applyTimeEnd"
        @confirmTime="confirmCnTime"
        :supportClear="true"
      />
    </van-cell-group>
    <van-cell-group>
     <p class="label  FormTit"><span></span>申请类型</p>
      <van-field-select-picker
        label=""
        placeholder="请选择"
        :supportClear="true"
        v-model="params.procCode"
        :columns="applyTypeList"
        :option="{ label: 'entityName', value: 'procCode' }"
        @confirm="selectApplyType"
      />
      <div class="bottomLine"></div>
    </van-cell-group>

    <div class="search-bottom">
      <span class="btncancel" @click="cancel">重置</span>
      <span class="btnconfirm" @click="confirm">确定</span>
    </div>
  </div>
</template>

<script>
const formP = {
  procCode: "",
  applyTimeBegin: "",
  applyTimeEnd: "",
};

import DateTime from "@/components/form/dateTimeSection";
import VanFieldSelectPicker from "@/components/ActionSheet/VanFieldSelectPicker";
import { getAction } from "@/api/manage";
export default {
  name: "search",
  components: { DateTime, VanFieldSelectPicker },
  data() {
    return {
      applyTypeList:[],
      applyName:"",
      params: Object.assign({}, formP),
    };
  },
  computed: {},
  mounted() {},
  created() {
      getAction("/home/homePage/getProcDictList", {}).then((res) => {
          this.applyTypeList=res.result
      });

         
  },
  methods: {
    confirmCnTime(startTime, endTime) {
      // 改变父组件的值
      console.log("startTime" + startTime);
      console.log("endTime" + endTime);
      this.params.applyTimeBegin = startTime;
      this.params.applyTimeEnd = endTime;
    },

    selectApplyType(item) {
      console.log(item)
      if (item) {
        this.applyName = item.entityName;
        this.params.procCode = item.procCode;
      } else {
        this.applyName = "";
        this.params.procCode = "";
      }
    },
    cancel() {
      this.params = Object.assign({}, formP);
      this.applyName="";
      this.$emit("resetCategory");
    },
    confirm() {
      // this.$router.push({ path: "/carRoomList" });
      console.log("++++++++++++++++");
      console.log(this.params);
      this.$emit("getCategory", this.params);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/theme.scss";

.topStyle{
  top: 100px;
}
.search-content {
  //  padding-bottom: 0.5rem;
  position: fixed;
  top: 100px;
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  padding-top: 20px;
  z-index: 999;

  .search-bottom {
    height: 100px;
    width: 100%;
    background: #ffffff;
    // background: red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 22px;
    .btnconfirm {
       width: 344px;
        height: 78px;
        background: #1890ff;
        color: #fff !important;
        border-radius: 6px;
        text-align: center;
        font-size: 30px;
        line-height: 78px;
    }
    .btncancel {
        font-size: 30px;
        width: 344px;
        height: 78px;
        background: #F6F6F6;
        color: #191F25;
        // border: 0.01px solid rgba(25, 31, 37, 0.12);
        border-radius: 6px;
        text-align: center;
        line-height: 78px;
    }
  }
}
</style>